<template>
  <div>
    <el-row type="flex" :gutter="50" style="margin:1em 0;">
      <el-col :span="12">
        <el-carousel height="200px" style="background-color:lightgreen;">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 class="small">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="12">
        <el-descriptions title="博主信息">
          <template #extra>
            <unicon name="postcard"></unicon>
          </template>
          <el-descriptions-item>
            <template #label>
              <span style="font-weight:bold;">主要技能</span>
            </template>
            python django fastapi
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <span style="font-weight:bold;">次要技能</span>
            </template>shell vue
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <span style="font-weight:bold;">现状</span>
            </template>青岛求职中</el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <!-- <i style="font-weight:bold;" class="fa fa-envelope-o"></i>  -->
              <unicon name="envelope-alt" width="1.5em" height="1.3em"></unicon>
              <span style="font-weight:bold;"> Email</span>
            </template>
            hpstrike@outlook.com
          </el-descriptions-item>
          <el-descriptions-item label="Gitee">
            <template #label>
              <el-link href="https://github.com/hpgundam" target="_blank" :underline="false">
                <!-- <i class="fa fa-github fa-2x fa-spin"></i> Github -->
                <unicon name="github"></unicon> Github
              </el-link>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="Gitee">
            <template #label>
              <el-link href="https://gitee.com/hpgundam" target="_blank" :underline="false">
                <!-- <i style="color:red;" class="fa fa-google fa-2x fa-spin"></i> Gitee -->
                <unicon name="google" fill="red"></unicon> Gitee
              </el-link>
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <short-list cType="programming"></short-list>
    <short-list cType="interests"></short-list>
    <short-list cType="entertainment"></short-list>
    <short-list cType="others"></short-list>
  </div>
</template>

<script>
import ShortList from '../components/ShortList.vue'
export default {
  components: { ShortList }

}
</script>

<style>
</style>